<template>
  <div class="app-container">
    <h3>常见汇率</h3>
    <div class="home">
      <template v-for="(item, index) in rateList">
        <el-card class="rateCard" shadow="always">
          <div style="font-size: 14px;color: gray">
            {{item.sellCurrencyCode + "  ->"}}     {{item.buyCurrencyCode}}
          </div>
          <div style="float: right;font-size: 25px">
            {{item.exchangeRate}}
          </div>
        </el-card>
        <div style="flex-basis: 100%;"  v-if="index + 1 < rateList.length && item.sellCurrencyCode !== rateList[index + 1].sellCurrencyCode" ></div>
      </template>
    </div>
  </div>
</template>

<script>
import {queryCommonRate} from "@/api/fusion/va/module/bison"
export default {
  name: "Index",
  data() {
    return {
      // 版本号
      rateList:[]
    };
  },
  created() {
    this.query()
  },
  methods: {
    query() {
      queryCommonRate().then(response => {
        this.rateList = response.data
      })
    }
  }
};
</script>

<style scoped lang="scss">
.home{
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  //flex-wrap: wrap;
}
.rateCard {
  cursor: pointer;
  color:#645e5e;
  width: 220px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  margin: 10px
}
</style>

